<template>
  <!-- 更多标签筛选 -->
  <ve-popup v-model="visible" @close="close" :maskClose="false" mode="right">
    <view class="container" style="width: 100%">
      <scroll-view scroll-y style="height: 100vh">
        <view class="header">
          <ve-navbar title="更多标签" :autoBack="false" @leftClick="close"></ve-navbar>
        </view>
        <view class="content">
          <view class="label-list">
            <view
              v-for="(item, index) in list"
              :key="index"
              class="label-item"
              :class="{ active: _checked.includes(index) }"
              @tap="selectTab(index)"
            >
              <view class="label-item-num">{{ item.num }}</view>
              <view
                class="label-item-name"
                :class="{
                  fz20:
                    item.name == '24小时内新增订单' ||
                    item.name == '合同签署中(付费版)' ||
                    item.name == '合同未发起(付费版)' ||
                    item.name == '合同签署中(普通版)',
                }"
              >
                {{ item.name }}
              </view>
            </view>
          </view>
          <ve-bottom-box size="mini">
            <ve-button style="width: 238rpx" @click="resetLabelModal">重置</ve-button>
            <ve-button type="primary" style="flex: 1; margin-left: 16rpx" @click="confirmLabelModal">确认筛选</ve-button>
          </ve-bottom-box>
        </view>
        <ve-gap size="64"></ve-gap>
      </scroll-view>
    </view>
  </ve-popup>
</template>

<script setup>
  import { ref, computed, watch } from 'vue'
  import { onBackPress } from '@dcloudio/uni-app'
  // 截获左滑右滑
  onBackPress(() => {
    if (visible.value == true) {
      close()
      // 阻止默认事件
      return true
    }
  })
  const props = defineProps({
    modelValue: Boolean,
    list: Array,
    checkedList: Array,
  })
  const emit = defineEmits(['update:modelValue', 'close', 'confirm'])
  const visible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emit('update:modelValue', val)
    },
  })
  const _checked = ref([])
  watch(
    () => visible.value,
    (newVal) => {
      if (newVal) {
        // 当前 popup 操作 _checked 数据
        _checked.value = [...props.checkedList]
      }
    },
  )
  const close = () => {
    visible.value = false
    emit('close')
  }
  // 选择tab
  const selectTab = (index) => {
    // 将当前下标 加入或者 移除出 checkedLabels
    let tempList = [..._checked.value]
    if (tempList.includes(index)) {
      tempList.splice(
        tempList.findIndex((item) => item == index),
        1,
      )
    } else {
      tempList.push(index)
    }
    _checked.value = tempList
  }
  const resetLabelModal = () => {
    _checked.value = []
  }
  const confirmLabelModal = () => {
    visible.value = false
    emit('confirm', _checked.value)
  }
</script>
<style lang="less" scoped>
  .container {
    height: 100vh;
    width: 100%;
    background: #f7f8fa;
    .content {
      padding: 24rpx;
      overflow-y: auto;
      .label-list {
        padding: 24rpx;
        padding-bottom: 0;
        background-color: #ffffff;
        border-radius: 8rpx;
        overflow: hidden;
        .label-item {
          background: #f3f7ff;
          border-radius: 4rpx;
          padding: 24rpx 0;
          text-align: center;
          color: #1d2129;
          font-size: 26rpx;
          width: calc(33.3% - 12.3rpx);
          display: inline-block;
          margin-right: 18rpx;
          margin-bottom: 24rpx;
          border: 2rpx solid transparent;
          .label-item-num {
            height: 32rpx;
            line-height: 32rpx;
          }
          .label-item-name {
            font-size: 24rpx;
            height: 32rpx;
            line-height: 32rpx;
            font-weight: 600;
            margin-top: 12rpx;
          }
          .fz20 {
            font-size: 20rpx;
          }
        }
        .label-item:nth-of-type(3n) {
          margin-right: 0;
        }
        .label-item.active {
          border: 2rpx solid #3072f6;
          color: #3072f6;
        }
      }
    }
  }
</style>
